<template>
  <el-form class="demo-form-inline" style="margin-left: 10px">
    <el-row>
      <el-col :span="24">
        <el-form-item>
          <el-input v-model="keyword" autocomplete="on" placeholder="关键字" />
        </el-form-item>
         <el-form-item>
          <el-button type="primary" @click="onSubmit">搜索</el-button>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>

  <el-tabs type="card" v-model="defaultTab" class="demo-tabs">
    <el-tab-pane :label="'医案(' + yians.length + ')'" name="first">
      <el-scrollbar style="height:700px">
        <div v-for="yian in yians" class="" @click="" style="margin-bottom:20px;background-color: antiquewhite;">
          标题：{{ yian.title }} <br>
          医案详情：{{ yian.content.substr(0, 100) }} <br>
          医生: {{ yian.doctor }} <br>
          出自：{{ yian.reference }} <br>
          <router-link :to="'/yian/:id'" @click.native="setSession(yian)">
            <el-button size="small">
              详情
            </el-button>
          </router-link>
          <!-- <a @click="analyse(yian)">分析 </a> <a>编辑 </a> <a>删除 </a> <a>收藏 </a> <a>标注 </a> -->
        </div>
      </el-scrollbar>
    </el-tab-pane>
    <el-tab-pane :label="'中药(' + zhongyaos.length + ')'" name="second">
      <div v-for="zhongyao in zhongyaos" class="" @click="" style="margin-bottom:20px;background-color: antiquewhite;">
        名称：{{ zhongyao.name }} <br>
        描述: {{ zhongyao.desc }} <br>
        功能：{{ zhongyao.function }} <br>
        来自：{{ zhongyao.source }} <br>
      </div>
    </el-tab-pane>
    <el-tab-pane :label="'方剂(' + fangjis.length + ')'" name="third">
      <el-scrollbar>
        <div v-for="fangji in fangjis" class="" @click="" style="margin-bottom:20px;background-color: antiquewhite;">
          名称：{{ fangji.name }} <br>
          详情: {{ fangji.detail }} <br>
          使用：{{ fangji.use }} <br>
          功能：{{ fangji.function }} <br>
          主治：{{ fangji.fix }} <br>
          来自：{{ fangji.source }} <br>
        </div>
      </el-scrollbar>
    </el-tab-pane>

    <el-tab-pane :label="'穴位(' + xueweis.length + ')'" name="fourth">
      <el-scrollbar>
        <div v-for="xuewei in xueweis" class="" @click="" style="margin-bottom:20px;background-color: antiquewhite;">
          名称：{{ xuewei.name }} <br>
          位置: {{ xuewei.position }} <br>
          主治：{{ xuewei.function }} <br>
        </div>
      </el-scrollbar>
    </el-tab-pane>

    <el-tab-pane :label="'古籍(' + gujis.length + ')'" name="fifteen">
      <el-scrollbar>
        <div v-for="guji in gujis" class="" @click="" style="margin-bottom:20px;background-color: antiquewhite;">
          条文: {{ guji.content }} <br>
          名称：{{ guji.chapter }} <br>
          来源：{{ guji.source }} <br>
        </div>
      </el-scrollbar>
    </el-tab-pane>

    <el-tab-pane :label="'证型(' + zhengs.length + ')'" name="sixteen">
      <el-scrollbar>
        <div v-for="zheng in zhengs" class="" @click="" style="margin-bottom:20px;background-color: antiquewhite;">
          名称: {{ zheng.name }} <br>
          详情：{{ zheng.detail }} <br>
          来源：{{ zheng.source }} <br>
        </div>
      </el-scrollbar>
    </el-tab-pane>

    <el-tab-pane :label="'治法(' + zhis.length + ')'" name="6">
      <el-scrollbar>
        <div v-for="zhi in zhis" class="" @click="" style="margin-bottom:20px;background-color: antiquewhite;">
          名称: {{ zhi.name }} <br>
          详情：{{ zhi.detail }} <br>
          来源：{{ zhi.source }} <br>
        </div>
      </el-scrollbar>
    </el-tab-pane>

    <el-tab-pane :label="'脉像(' + mais.length + ')'" name="8">
      <el-scrollbar>
        <div v-for="mai in mais" class="" @click="" style="margin-bottom:20px;background-color: antiquewhite;">
          名称: {{ mai.name }} <br>
          详情：{{ mai.detail }} <br>
          来源：{{ mai.source }} <br>
        </div>
      </el-scrollbar>
    </el-tab-pane>

    <el-tab-pane :label="'西医(' + xiyis.length + ')'" name="9">
      <el-scrollbar>
        <div v-for="xiyi in xiyis" class="" @click="" style="margin-bottom:20px;background-color: antiquewhite;">
          名称: {{ xiyi.name }} <br>
          作用：{{ xiyi.function }} <br>
        </div>
      </el-scrollbar>
    </el-tab-pane>

    <el-tab-pane :label="'医生(' + doctors.length + ')'" name="10">
      <el-scrollbar>
        <div v-for="doctor in doctors" class="" @click="" style="margin-bottom:20px;background-color: antiquewhite;">
          名称: {{ doctor.name }} <br>
          详情：{{ doctor.detail }} <br>
        </div>
      </el-scrollbar>
    </el-tab-pane>

  </el-tabs>

</template>

<script>
import axios from "axios"
import YiAnDetail from "@/pages/doctor/YiAnDetail.vue"
export default {
  components: {
    YiAnDetail
  },
  data() {
    return {
      defaultTab: "first",
      yians: [],
      zhongyaos: [],
      fangjis: [],
      xueweis: [],
      gujis: [],
      doctors: [],
      zhis: [],
      zhengs: [],
      mais: [],
      xiyis: [],
      keyword: '咳嗽',
      total: -1,
      searchOptions: ["医案", "方剂", "中药", "穴位", "医生", "症状", "古籍", "证型", "治法", "西医", "脉象"],
      checkOptions: ["医案"]
    }
  },
  methods: {
    onSubmit: function () {
      this.getData()
    },
    getData: async function () {
      // 获取后台数据
      let that = this
      let type = this.checkOptions.join(" ")
      console.log(type)
      try {
        let res = await axios.get("/api/doctor/search?keyword=" + that.keyword + "&&type=" + type)
        console.log(res.data)
        let data = res.data.data
        that.yians = data.yians
        that.total = 10
        that.zhongyaos = []
        that.fangjis = []
        that.xueweis = []
        that.gujis = []
        that.doctors = []
        that.zhengs = []
        that.mais = []
        that.xiyis = []
      }
      catch (err) {
        console.log(err)
        alert('请求出错！')
      }
    },
    setSession: function (data) {
      console.log("click button")
      localStorage.setItem("yian", JSON.stringify(data))
    },
    analyse: function (data) {
      alert(data.analyse)
    }
  }
}
</script>

<style scoped>
</style>